<template>
  <van-sticky :offset-top="0">
    <div class="bg-white search-header" ref="elRefName">
      <div class="text-center text-dark line50 font18">搜索</div>
      <div class="flex-row justify-around p_x10 p_y10">
        <div class="flex-row flex1 m_r10 justify-center align-center input-container">
          <div class="flex" style="width: 1.5rem">
            <van-icon name="search" class="text-light m_t2" size="1.2rem"/>
          </div>
          <input v-model="keyword" class="flex flex1 search-input" placeholder="搜索商品"/>
          <van-icon v-show="keyword.length"
                    name="clear"
                    @click="()=>keyword=''"
                    class="text-light m_t2"
                    size="1.2rem"/>
        </div>
        <van-button type="danger" round size="small" @click="_keyword=keyword" class="font14">搜 索</van-button>
      </div>
    </div>
  </van-sticky>
  <div class="search-main">
    <Goods :sticky-offset-top="elHeight" :keyword="_keyword" @onChangeHeight="onChangeHeight"/>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import {Dialog} from "vant";
import {useElementHeight} from "@/hooks/Sticky";
import Goods from "@/views/home/components/Goods.vue";

export default defineComponent({
  name: "SearchResults",
  components: {
    Goods,
  },
  data() {
    return {
      keyword: '',
      _keyword: '',
    }
  },
  created() {
    this.keyword = (this.$route.query.keyword || '') as string;
  },
  watch: {
    '$route'(route) {
      if (route.name === this.$route.name) {
        this.keyword = (route.query.keyword || '') as string;
      }
    }
  },
  setup() {
    return {
      ...useElementHeight(),
    }
  },
  methods: {
    async onDestroyHistory() {
      try {
        await Dialog.confirm({
          message: '确认清除历史记录？',
        })
        console.log('清除历史搜索记录')
      } catch (e) {

      }
    }
  }
})
</script>

<style lang="less" scoped>
.search-header {
  .input-container {
    background-color: #F6F6F6;
    width: 70%;
    height: 38px;
    border-radius: 30px;
    padding: 0 10px;
    line-height: 26px;

    .search-input {
      border-width: 0;
      background-color: #F6F6F6;
    }
  }
}


</style>
